<script setup>


import CommonBox from "../components/CommonBox.vue";
const option1 = reactive({
  tooltip: {
    trigger: 'item'
  },

  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 59, name: '当日在岗人员' },
        { value: 23, name: '请休假人员' },
        { value: 10, name: '公出人员' },
        { value: 8, name: '其他人员' },
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      label: {
        formatter: '{b}  {d}%  ',
      }
    }
  ]
});

const option2 = ref({
  xAxis: {
    type: 'category',
    data: ['本部', '甘肃本部', '白银项目组', '湖北东方化工项目管理部', '天山铀业伊犁项目管理部'],
    axisLabel: {
      rotate: 15 // 设置文字倾斜角度，这里以45度为例
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '生产人员',
      type: 'bar',
      stack: 'total',
      barWidth: '60%',
      label: {
        show: true,
      },
      data: [112, 189, 210, 27, 17]
    },
    {
      name: '非生产人员',
      type: 'bar',
      color: '#EE822F',
      stack: 'total',
      barWidth: '60%',
      label: {
        show: true,
      },
      data: [109, 54, 31, 8, 2]
    }
  ]
});


</script>

<template>
<div class="view-port">

  <div class="top-container">
    <common-box>
      <template #header>人员在岗基本情况</template>
      <template #default>
        <v-chart :option="option1"></v-chart>
      </template>
    </common-box>

  </div>
  <div class="bottom-container">
    <common-box>
      <template #header>人员分布数据</template>
      <template #default>
        <v-chart :option="option2"></v-chart>
      </template>
    </common-box>
  </div>

</div>



</template>

<style scoped lang="scss">

  .view-port {
    padding: 2em;
    display: flex;
    flex-direction: column;
    height: 100%;
    .top-container {
      width: 100%;
      height: 50%;
    }

    .bottom-container {
      width: 100%;
      height: 50%;
    }

  }



</style>